// 引入一个UI库
import 'package:flutter/material.dart';

// 定义动态组件
class MyTopBar extends StatefulWidget {
  @override
  _MyTopBarState createState() => _MyTopBarState();
}

// 定义一个控制器
class _MyTopBarState extends State<MyTopBar> with SingleTickerProviderStateMixin {
// 因为我们的TabBar自带一个动画切换效果，所以用SingleTickerProviderStateMixin  对我们的组件进行配置

  // 导航组件需要一个很重要的导航控制器， controller
  TabController _controller;

  @override
  void initState() {
    
    // 给导航控制器进行初始化
    // _controller 是我们需要的控制器，能够将页面和导航绑定到一起， 最终实现切换效果
    // length 控制的数量,导航/页面数量  vsync动画效果异步的配置项。都是固定写法
    _controller = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 头部导航
      appBar: AppBar(
        title: TabBar(
          controller: _controller,
          tabs: <Widget>[ // 一般我们写3个Tab项
            Tab(icon: Icon(Icons.directions_bike)),
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_subway)),
          ],
        ),
      ),

      body: TabBarView(
        controller: _controller,
        children: <Widget>[
          SelfHomePage(page: 1),
          SelfHomePage(page: 2),
          SelfHomePage(page: 3),
        ],
      ),
    );
  }
}


class SelfHomePage extends StatelessWidget {
  // 类的重写，使我们的类由无参变有参
  SelfHomePage({Key key, @required this.page}):super(key: key);
  final int page;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('page $page', style: TextStyle(
        fontSize: 30
      ),),
    );
  }
}

